<template>
  <div class="table-box">
    <ProTable
      :request-api="temData"
      :columns="columns"
      :search-props="searchProps"
      @row-dblclick="openDrawer"
      @row-contextmenu="handleRightClick"
    >
      <template #tableHeader>
        <el-button type="primary" :icon="Plus">增加</el-button>
        <el-button type="primary" :icon="Download">导出</el-button>
      </template>
      <template #operation="{ row }">
        <el-button @click="myElDrawerRef?.openDrawer(row)">查看</el-button>
      </template>
    </ProTable>
    <MyElDrawer :form-field="drawerFormField" ref="myElDrawerRef" :drawer-type="DrawerType.EditData">
      <template #drawerHeaderTitle>查看详细信息</template>
      <template #drawerHeaderRightButton>
        <el-button @click="otherDrawerShow" type="success" link>test</el-button>
      </template>
      <!--      <template #footer>
        <el-col v-for="item in [1, 2, 3, 4]" :key="item" :span="6">
          <el-button type="primary" :span="6">确定</el-button>
        </el-col>
      </template>-->
    </MyElDrawer>
    <MyElDrawer :size="80" ref="otherDrawerRef" :modal-show="true" :drawer-type="DrawerType.EditData">
      <template #default>
        <div class="table-box">
          <ProTable :data="tableData" :columns="tableColumns" :pagination="false">
            <template #tableHeader>
              <el-button type="primary" :icon="Plus">增加</el-button>
              <el-button type="primary" :icon="Download">导出</el-button>
            </template>
            <template #operation>
              <el-button type="primary" link :icon="View" @click="ElMessage.info('test')">查看</el-button>
            </template>
          </ProTable>
        </div>
      </template>
    </MyElDrawer>
    <MyRightClickMenu ref="myRightClickMenuRef" :right-menu-list="rightMenuList"> </MyRightClickMenu>
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref, toRaw } from 'vue'
import ProTable from '@/components/ProTable/index.vue'
import { getVehicelList, temData } from '@/api/modules/login'
import { ColumnProps, MVPSearchProps } from '@/components/ProTable/interface'
import { Download, Plus, View } from '@element-plus/icons-vue'
import MyElDrawer from '@/components/MyElDrawer/index.vue'
import MyRightClickMenu from '@/components/MyRightClickMenu/index.vue'
import { DrawerType, FormField } from '@/components/MyElDrawer/interface'
import { ElMessage } from 'element-plus'
import { rightMenuItem } from '@/components/MyRightClickMenu/interface'

const myElDrawerRef = ref<InstanceType<typeof MyElDrawer>>()
const otherDrawerRef = ref<InstanceType<typeof MyElDrawer>>()
const myRightClickMenuRef = ref<InstanceType<typeof MyRightClickMenu>>()
let columns = ref<ColumnProps[]>([
  { type: 'selection', width: 50 },
  { prop: 'id', label: 'id' },
  { prop: 'title', label: '标题' },
  { prop: 'content', label: '内容' },
  { prop: 'createTime', label: '创建时间' }
])
let searchProps = ref<MVPSearchProps[]>([
  {
    prop: 'id',
    label: 'id',
    search: 'input',
    props: {
      type: 'number'
    }
  },
  {
    prop: 'title',
    label: '车牌号',
    search: 'select',
    handleFocus: getVehicelList,
    params: [
      'id',
      'content',
      {
        createTime: {
          startTime: 0,
          endTime: 1
        },
        page: 1,
        num: ['12', '321']
      }
    ],
    fieldNames: { label: 'licensePlate', value: 'licensePlate' }
  },
  {
    prop: 'createTime',
    label: '创建时间',
    search: 'date-picker',
    props: {
      type: 'datetimerange',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      defaultTime: [new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)],
      clearable: true
    }
  },
  {
    prop: 'content',
    label: '内容',
    search: 'input'
  }
])
let drawerFormField: FormField = [
  {
    prop: 'id',
    label: 'id',
    type: 'input',
    isRules: true,
    rules: [{ required: true, message: 'id不能为空', trigger: 'blur' }]
  },
  {
    prop: 'title',
    label: '标题',
    type: 'input'
  },
  {
    prop: 'content',
    label: '内容',
    type: 'input'
  },
  {
    prop: 'createTime',
    label: '创建时间',
    type: 'date-picker'
  },
  {
    prop: 'nameOfTheInstitution',
    label: '机构名称',
    type: 'input'
  },
  {
    prop: 'institutionalCloudCode',
    label: '机构云码',
    type: 'select',
    enum: [
      { label: '1', value: '1' },
      { label: '2', value: '2' },
      { label: '3', value: '3' },
      { label: '4', value: '4' }
    ]
  },
  {
    prop: 'institutionalFinancialCode',
    label: '机构财码',
    type: 'input'
  },
  {
    prop: 'customerFinancialCode',
    label: '客户财码',
    type: 'input'
  },
  {
    prop: 'supplierFinancialCode',
    label: '供应商财码',
    type: 'input'
  },
  {
    prop: 'abbreviationOfTheInstitution',
    label: '机构简称',
    type: 'input'
  },
  {
    prop: 'idNumber',
    label: '证件号码',
    type: 'input'
  },
  {
    prop: 'typeOfTax',
    label: '纳税类型',
    type: 'input'
  },
  {
    prop: 'region',
    label: '所在区域',
    type: 'input'
  },
  {
    prop: 'theNatureOfTheEnterprise',
    label: '企业性质',
    type: 'input'
  },
  {
    prop: 'groupAffiliation',
    label: '集团归属',
    type: 'input'
  },
  {
    prop: 'customerRatings',
    label: '客户评级',
    type: 'input'
  },
  {
    prop: 'email',
    label: '电子邮箱',
    type: 'input'
  },
  {
    prop: 'gisLongitude',
    label: 'GIS经度',
    type: 'input'
  },
  {
    prop: 'gisLatitude',
    label: 'GIS纬度',
    type: 'input'
  },
  {
    prop: 'parentAuthority',
    label: '上级机构',
    type: 'input'
  }
]
let tableColumns: ColumnProps[] = [
  {
    type: 'index',
    width: 80,
    label: '序号'
  },
  {
    prop: 'typeOfInstitution',
    label: '机构类型'
  },
  { prop: 'operation', label: '操作', fixed: 'right', width: 330 }
]
let tableData: any[] = [
  {
    typeOfInstitution: 'test'
  }
]
let rightMenuList: rightMenuItem[] = [
  {
    name: 'test1',
    handleClick: () => {
      ElMessage.info('test1')
    }
  },
  {
    name: 'test2',
    handleClick: () => {
      ElMessage.info('test2')
    }
  }
]
const openDrawer = (row: any) => {
  nextTick(() => {
    drawerFormField.value = row
    myElDrawerRef.value?.openDrawer({ ...toRaw(row), createUser: 'test', institutionalCloudCode: 1 })
  })
}
const otherDrawerShow = () => {
  nextTick(() => otherDrawerRef.value?.openDrawer())
}
const handleRightClick = (row: any, column: any, event: Event) => {
  myRightClickMenuRef.value?.rightClick(row, column, event)
}
</script>

<style scoped lang="scss"></style>
